.with-panel {
  display: grid;
  height: 100%;
  width: 100%;
  --gap: var(--WithPanel__gap, 0);
  --resizer-size: var(--WithPanel__resizer-size, var(--WithPanel__gap, 0.3rem));
  --resizer-color: var(--WithPanel__resizer-color, var(--color-fg-help));
  --half-gap: calc(var(--gap) / 2);
  --resizer-half-size: calc(var(--resizer-size) / 2);
  --resizer-offset: calc(-1 * (var(--half-gap) + var(--resizer-half-size)));

  &.top {
    grid-template-areas: 'panel' 'main';
    grid-template-rows: auto 1fr;
    > .panel {
      margin-bottom: var(--gap);
    }
  }
  &.bottom {
    grid-template-areas: 'main' 'panel';
    grid-template-rows: 1fr auto;
    > .panel {
      margin-top: var(--gap);
    }
  }
  &.left {
    grid-template-areas: 'panel main';
    grid-template-columns: auto 1fr;
    > .panel {
      margin-right: var(--gap);
    }
  }
  &.right {
    grid-template-areas: 'main panel';
    grid-template-columns: 1fr auto;
    > .panel {
      margin-left: var(--gap);
    }
  }

  > .main {
    grid-area: main;
  }
  > .panel {
    grid-area: panel;
    position: relative;
    isolation: isolate;
    > .resizer {
      position: absolute;
      z-index: 1;
      transition: background-color 0.2s ease;
      transition-delay: 0s;
    }
  }

  &.horizontal > .main,
  &.horizontal > .panel {
    height: 0;
    min-height: 100%;
  }

  &.is-resizing > .panel > .resizer,
  > .panel > .resizer:hover {
    background-color: var(--resizer-color);
    transition-delay: 0.1s;
  }

  &.top > .panel > .resizer,
  &.bottom > .panel > .resizer {
    height: var(--resizer-size);
    width: 100%;
    cursor: row-resize;
  }
  &.left > .panel > .resizer,
  &.right > .panel > .resizer {
    width: var(--resizer-size);
    height: 100%;
    cursor: col-resize;
  }
  &.top > .panel > .resizer {
    bottom: var(--resizer-offset);
  }
  &.bottom > .panel > .resizer {
    top: var(--resizer-offset);
  }
  &.left > .panel > .resizer {
    right: var(--resizer-offset);
  }
  &.right > .panel > .resizer {
    left: var(--resizer-offset);
  }
}
